<@override name="styles">
<link href="assets/DataTables-1.9.4/media/css/dataTables.bootstrap.css" type="text/css" rel="stylesheet">
</@override>
<@override name="content">
<div class="header">
  <h1 class="page-title">比赛列表</h1>
</div>
<ul class="breadcrumb">
  <li>
    <a href="admin">首页</a>
    <span class="divider">/</span>
  </li>
  <li class="active">比赛管理</li>
</ul>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="well">
      <div id="container">
        <table id="contest-list" class="table table-hover table-striped cf basetable dataTable">
          <thead>
          <tr>
            <th width="5%">ID</th>
            <th width="40%">Title</th>
            <th width="14%">Start Time</th>
            <th width="14%">End Time</th>
            <th width="5%">Type</th>
            <th width="5%">Status</th>
            <th width="17%">Action</th>
          </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="modal hide fade contestModal" id="editModal">
  <form class="" action="contest/update?ajax=1" id="editContestForm" method="post">
    <div class="modal-header">
      <button class="close" aria-hidden="true" data-dismiss="modal" type="button">x</button>
      <h3 id="editModalLabel">
        Edit contest <span id="cid"></span>:
        <span id="contest"></span>
      </h3>
    </div>
    <div class="modal-body">
      <div id="content">
        <img src="assets/images/ajax-loader.gif"/> Loading...
      </div>
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-primary">Save</button>
      <button class="btn" data-dismiss="modal">Cancel</button>
    </div>
  </form>
</div>
</@override>

<@override name="scripts">
<script type="text/javascript" src="assets/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="assets/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    var oTable = $('#contest-list').jfinalDataTable({
      "sAjaxSource": "/api/admin/contestList",
      "aaSorting": [
        [0, "desc"]
      ],
      "aoColumns": [
        {
          "mData": "cid",
          "mRender": function (data, type, full) {
            return '<a href="contest/show/' + full.cid + '" target="_blank">' + data + '</a>';
          }
        },
        {
          "mData": "title",
          "mRender": function (data, type, full) {
            return '<a href="contest/admin/' + full.cid + '" target="_blank">' + data + '</a>';
          }
        },
        {
          "mData": "startTime",
          "mRender": function (data, type, full) {
            return parseTimestamp(data);
          }
        },
        {
          "mData": "endTime",
          "mRender": function (data, type, full) {
            return parseTimestamp(data);
          }
        },
        {"mData": "ctype", "bSortable": false},
        {"mData": "cstatus", "bSortable": false},
        {
          "mData": null,
          "bSortable": false,
          "mRender": function (data, type, full) {
            var action = '<button data-cid="' + full.cid
                    + '" class="btn btn-success contest-edit">Edit</button>'
                    + '<button data-cid="' + full.cid
                    + '" class="btn btn-warning contest-toggle">'
                    + (full.status ? 'Delete' : 'Resume')
                    + '</button>';
            return action;
          }
        }
      ]
    });

    $('#editContestForm').submit(function () {
      $.post($(this).attr("action"), $('#editContestForm').serialize());
      $('#editModal').modal('hide');
      return false;
    });

    $('table').on('click', '.contest-edit', function () {
      var cid = $(this).data('cid');
      $('span#cid').html(cid);
      //$('span#contest').html('<a href="contest/edit/' + cid + '">' + title + '</a>');
      $('#editModal').modal("show");
      $.get("contest/edit/" + cid + "?ajax=1", {},
              function (data) {
                $('#editModal #content').html(data);
              });
    });
  });
</script>
</@override>
<@extends name="../_layout.html"></@extends>
